<template>
  <div class="login-page">

    <div class="login">
      <div class="login-title">
        <p>欢迎登录</p>
        <!--   内网测试环境LNG船舶调度系统     -->
        <p class="login-name">LNG船舶调度系统</p>
      </div>
      <a-form
          layout="vertical"
          ref="loginForm"
          :model="formData"
      >
        <a-form-item label="账号" name="username" :rules="[{ required: false, message: '请输入账号' }]">
          <a-input
              v-model:value="formData.username"
              placeholder="请输入账号"
          />
        </a-form-item>
        <a-form-item label="密码" name="password" :rules="[{ required: false, message: '请输入密码' }]">
          <a-input-password
              v-model:value="formData.password"
              placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item label="验证码" name="code" :rules="[{ required: false, message: '请输入验证码' }]">
          <div :style="{display: 'flex'}">
            <a-input
                v-model:value="formData.code"
                placeholder="请输入验证码"
            />
            <Verify @codeChange="codeChange"/>
          </div>
        </a-form-item>
        <div class="item">
          <a-button class="btn" type="primary" :loading="loading" @click="loginFunc">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from 'vue';
import { useRouter } from 'vue-router';
import Verify from './Verify.vue'
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const router = useRouter();
const loading = ref(false);
const loginForm = ref();
const formData = reactive({
  username: '',
  password: '',
  code: ''
});
// const rules = {
//   username: [{required: true, message: '请填写账号'}],
//   password: [{required: true, message: '请填写密码'}]
// };
const imgCode = ref('')
const codeChange = (val) => {
  console.log('现在的Code', val)
  imgCode.value = val
}
// 登陆
// 为了测试方便，登陆和获取权限分写了，权限还是mock获取
const loginFunc = () => {
  if (formData.code && formData.username && formData.password) {
    if (formData.code === imgCode.value) {
      proxy.$api.login(formData).then(res => {
        localStorage.setItem('token', res.resultObject.token)
        localStorage.setItem('userName', res.resultObject.username)
        router.push('/resourcecontract');
      })
    } else {
      message.error('验证码错误，请重新输入')
    }
  } else {
    if (!formData.code) {
      message.error('请输入验证码')
    }
    if (!formData.username) {
      message.error('请输入账户')
    }
    if (!formData.password) {
      message.error('请输入密码')
    }
  }

}
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  // overflow: hidden;
  background: url("../../assets/images/Login/loginbg.jpg");
 // background: url("../../assets/images/Login/LoginBgTest.jpg")no-repeat;
  background-size: 100% 100%;
  .login {
    position: absolute;
    top: 25%;
    right: 20%;
    width: 500px;
    padding: 30px 20px;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    .item {
      width: 100%;
      text-align: center;
      margin-top: 15px;
      .btn {
        width: 100%;
        margin: 0 auto;
      }
    }
  }
}
.login-title {
  font-size: 30px;
  color: #2C3749;
  text-align: left;
  .login-name {
    font-size: 50px;
    font-weight: bold;
  }
}
@media screen and (min-width:1360px) and (max-width:1920px){
  .login {
    top: 15% !important;
    right: 15% !important;
  }
}
</style>
